<template>
	<div class="my_box">
		<div v-for="i in 100" :key="i" :style="{ backgroundColor: bgcolor(i) }" @click="handleHide">{{ i }}</div>
		<!-- <div v-for="i in 100" :key="i" >{{ bgcolor }}</div> -->
		<el-button round type="primary" class="btn" @click="luck(arr, btn_show)">{{ btn_show ? '停' : '抽' }}</el-button>
	</div>
</template>

<script setup>
import { computed, reactive, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
const arr = ['秦普军', '闫美靓', '蔡长恩', '肖竣曦', '邓涛', '刘俊', '徐聪', '张汉文']
const state = reactive({})
const btn_show = ref(false)
const luckP = ref()
// const bgcolor = ref()
const bgcolor = i => {
	const a = Math.ceil(Math.random() * 255)
	const b = Math.ceil(Math.random() * 255)
	const c = Math.ceil(Math.random() * 255)
	return `rgba(${a},${b},${c})`
}
const luck = (arr, flag) => {
	btn_show.value = !btn_show.value
	flag = !flag
	// console.log('flag', flag)
	// console.log('btn_show.value', btn_show.value)
	// let timer
	// console.log('flag', flag)
	timer = setInterval(flag => {
		luckP.value = getLuck(flag, arr)
	}, 1000)
	// if (!flag) {
	// 	clearInterval(timer)
	// 	timer = null
	// 	// ElMessageBox.alert(luckP.value, '恭喜您', {
	// 	// 	confirmButtonText: 'OK'
	// 	// })
	// 	console.log('luckP', luckP.value)
	// }
}
const getLuck = (flag, arr) => {
	let i = 0
	while (i < arr.length) {
		if (!flag) return arr[i]
		index++
	}
}
const handleHide = () => {}
</script>

<style scoped lang='scss'>
.my_box {
	width: 100%;
	height: calc(100vh - 110px);
	display: grid;
	grid-template-columns: repeat(10, 10fr);
	grid-template-rows: repeat(10, 10fr);
	text-align: center;
	color: #fff;
	div {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn {
		position: fixed;
		right: 0;
		bottom: 50%;
	}
}
</style>